import WebView from 'react-native-webview';
import { ScrollView, StatusBar, View, Button, Text, TextInput, Alert } from 'react-native';
import { TestCase, Tester,TestSuite } from '@rnoh/testerino';
import React, { useRef, useState } from 'react';

export default function WebViewTestOnNavigationStateChange() {
  return (
    <View style={{ flex:1}}>
        <Tester style={{ paddingBottom: 80 }}>
        <TestSuite name="react-native-webview">
            <TestCase
            key={'webview api onNavigationStateChange'}
            itShould={`webview api onNavigationStateChange`}
            tags={['C_API']}
            initialState={false}
            arrange={({ setState }) => {
              return (
                <View style={{ padding: 20, height: 500 }}>
                  <Text> onNavigationStateChange</Text>
                  <WebView
                    source={{ uri: 'https://www.baidu.com' }}
                    mediaPlaybackRequiresUserAction={true}
                      onNavigationStateChange={(navState) => {
                        console.log('onNavigationStateChange', navState);
                        Alert.alert(
                          'onNavigationStateChange 触发',
                          `URL: ${navState.url || 'N/A'}\n加载中: ${navState.loading ? '是' : '否'}\n标题: ${navState.title || 'N/A'}`
                        );
                        if (!navState.loading) {
                          setState(true);
                        }
                      }}
                     />
                </View>
              );
            }}
            assert={async ({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          </TestSuite>
        </Tester>
    </View>
  );
}
